<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件案例一</title>
    <script src="../vue.js"></script>
  <style>
      .input{
          font-size: 25px;
          color:#d9534f;
      }
      .div{
          width: 150px;
          height: 150px;
          background-color: pink;
      }
  </style>
</head>
<body>
<div id="div17">

    <btn-computer></btn-computer>
    <btn-computer></btn-computer>
    <btn-computer></btn-computer>
    <my-input></my-input>
<!--    <my-img></my-img>-->
<!--    <my-span></my-span>-->
    <!-- component 可以调用数据区的值   -->
    <keep-alive>
        <component :is="myspan"></component><br>
    </keep-alive>


    <button @click="changed">点击改变</button>

</div>
<template id="my-div-temp">
    <div>
        <div class="div">{{age}}</div>
        <my-son></my-son>
    </div>
</template>
<template id="ten">
    <div>
        <button @click="count++">点击了{{count}}次</button>
        <ul>
            <li v-for="value in arr">{{value}}</li>
        </ul>
    </div>

</template>


</body>
<script>
    //不要定义一个组件名称和已有的标签同名
    //全局组件不加 s  如:component ,局部组件要加 s  如:components
    //props 属性
    Vue.component("btn-computer",{
        data:function () {
           return{
               count:0,
               arr:["111", "222"]
            }
        },
        template:"#ten"
    })
   var vm = new Vue({
        el:"#div17",
        data:{
            myspan:"my-span",

        },
        methods:{
            changed:function(){
                if (this.myspan=="my-span"){
                   this.myspan='my-div'
                }else {
                    this.myspan='my-span'
                }
            }
        },
        components: {
            "my-img": {
                template: '<img src="01.JPG">'
            },
            "my-input": {
                data:function () {
                   return{
                       msg:"我是小小"

                   }
                },
                template:'<input class="input" v-model="msg">'
            },
            "my-span":{
                data:function () {
                    return{
                        num:Math.random()
                    }

                },
                template:'<span>我是span标签{{num}}</span>'
                },

            "my-div":{
                data:function(){
                    return{
                        num:Math.random()
                    }
                },
                template:' <div class="div">{{num}}</div>',
            },

            "my-div2":{
                data:function(){
                    return{
                        age:Math.random()
                    }
                },
                template:'#my-div-temp',
                components:{
                    "my-son":{
                        data:function(){
                            return{
                            }
                        },
                        template:'<h1>嘤嘤嘤嘤嘤嘤</h1>'
                    }
                }
            }
        }
    })

</script>
</html>